<template>
<div id="relationMain" class="relationMain">
    <canvas id="canvas" class="canvas"></canvas>
    <div class="hz">
        <div class="item" id="hz" @click="click(main)">
            <span class="relation">户主</span>
            <div v-if="main">
                <Avatar shape="square" icon="ios-person" size="46" :src="main.photo?main.photo:(main.gender=='男'?manPhoto:womanPhoto)" style="float: left;margin-right: 10px" />
                <span>{{main.peoplename}}
                    <Divider type="vertical" /> {{main.gender}}
                    <Divider type="vertical" /> {{main.birthday | age}} 岁
                </span>
                <span class="attr">
                    <Sicon :href="sicon.icon" :content="sicon.content" tip v-for="(sicon, index) in main.attr" :key="sicon.id"></Sicon>
                </span>
            </div>
            <div v-else style="text-align: center;">
                此户籍无户主
            </div>
        </div>
    </div>
    <div class="cy">
        <div class="item" v-for="(item, index) in other" :key="index" :id="'item'+index" @click="click(item)">
            <span class="relation">{{item.relations}}</span>
            <Avatar shape="square" icon="ios-person" size="46" :src="item.photo?item.photo:(item.gender=='男'?manPhoto:womanPhoto)" style="float: left;margin-right: 10px" />
            <span>{{item.peoplename}}
                <Divider type="vertical" /> {{item.gender}}
                <Divider type="vertical" /> {{item.birthday | age}} 岁
            </span>
            <span class="attr">
                <Sicon :href="sicon.icon" :content="sicon.content" tip v-for="(sicon, index) in item.attr" :key="sicon.id"></Sicon>
            </span>
        </div>
    </div>
</div>
</template>

<script>
import {
    basicAttrIcons
} from '@/utils/standardCode.js'

import nan from '@/assets/nan.png'
import nv from '@/assets/nv.png'

export default {
    props: {
        registerid: {
            type: [String, Number]
        }
    },
    data() {
        return {
            main: {},
            other: [],
            womanPhoto: nv,
            manPhoto: nan,
        }
    },
    methods: {
        initCanvas() {
            var relation = document.getElementById('relationMain');
            var canvas = document.getElementById('canvas');
            canvas.width = relation.offsetWidth;
            canvas.height = relation.offsetHeight;
            // 拿到上下文
            var context = canvas.getContext('2d');
            // 设置线条的颜色
            context.strokeStyle = '#666';
            // 设置线条的宽度
            context.lineWidth = 2;

            return context
        },
        getCenter(taget) {
            let top = taget.offsetTop
            let height = taget.offsetHeight

            let left = taget.offsetLeft
            let width = taget.offsetWidth
            return {
                y: top + height / 2,
                x: left + width / 2
            }
        },
        drawLink(context, hzCenter, taget) {
            // 绘制直线
            let itemCenter = this.getCenter(taget)
            let zx = (itemCenter.y + hzCenter.y) / 2
            context.beginPath();
            context.moveTo(hzCenter.x, hzCenter.y);
            context.lineTo(hzCenter.x, zx);
            context.moveTo(hzCenter.x, zx);
            context.lineTo(itemCenter.x, zx);
            context.moveTo(itemCenter.x, zx);
            context.lineTo(itemCenter.x, itemCenter.y);
            context.closePath();
            context.stroke();
        },
        click(item) {
            if (!item) {
                item = null
            }
            this.$emit("on-Click", item)
        },
        getAttr(people) {
            people.map(item => {
                item.attr = []
                if (item.attriconfont && item.attributestr) {
                    let icons = item.attriconfont.split(',')
                    let content = item.attributestr.split(',')
                    let id = item.attributeid.split(',')

                    for (let i = 0; i < icons.length; i++) {
                        item.attr.push({
                            icon: icons[i],
                            content: content[i],
                            id: id[i]
                        })
                    }
                }
                if (item.basic && item.basic != "") {
                    let basicIcons = item.basic.split(',')
                    for (let i = 0; i < basicIcons.length; i++) {
                        let basicAttr = basicAttrIcons.find(basicAttr => basicAttr.attr == basicIcons[i])
                        item.attr.push({
                            icon: basicAttr.icon,
                            content: basicAttr.attr,
                            id: "basicAttr" + i
                        })
                    }
                }
            })
        },
        async getData() {
            let res = await this.api.people.household({
                id: this.registerid
            })
            this.getAttr(res.data.rows[0].main)
            this.main = res.data.rows[0].main[0]
            if (!this.main) {
                this.main = false
            }
            this.getAttr(res.data.rows[0].other)
            this.other = res.data.rows[0].other
        }
    },
    async mounted() {
        await this.getData()

        let context = this.initCanvas()

        var hz = document.getElementById('hz')
        let hzCenter = this.getCenter(hz)

        for (let i = 0; i < this.other.length; i++) {
            var item = document.getElementById('item' + i)
            this.drawLink(context, hzCenter, item)
        }
    }
};
</script>

<style lang="less" scoped>
.relationMain {
    position: relative;

    .canvas {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .hz,
    .cy {
        // overflow: hidden;
        padding: 20px 0px;
        display: flex;
        justify-content: center;
    }

    .item {
        // width: 200px;
        // height: 80px;
        border: 1px #ddd solid;
        background-color: #FFF;
        float: left;
        margin: 0px 10px;
        position: relative;
        z-index: 99;
        cursor: pointer;
        padding: 20px 15px 10px;

        .attr {
            display: block;
            margin-top: 5px;

            /deep/ .ivu-tooltip {
                margin-right: 5px;
            }
        }

        .relation {
            position: absolute;
            top: -15px;
            line-height: 1;
            text-align: center;
            background-color: #FFF;
            border-radius: 5px;
            padding: 5px;
            border: 1px #ddd solid;
            left: 50%;
            display: inline-block;
            width: 80px;
            margin-left: -40px;
        }
    }
}
</style>
